<template>
  <my-card title="问题反馈">
    <template slot>
      <div class="page-card-body">
        <div class="page-header">
          <el-button type="primary" v-if="userInfo.role==2" @click="hkOpenAdd">新建反馈</el-button>
        </div>
        <div class="page-table-box">
          <el-table
            v-loading="loading"
            :data="tableList"
            style="width: 100%"
            stripe
            border
            header-cell-class-name="header-cell-class-name"
          >
            <el-table-column
              prop="id"
              label="编号"
              align="center"
              width="100"
            ></el-table-column>


            <el-table-column prop="account" label="用户" align="center"v-if="userInfo.role==1||userInfo.role==4">
            </el-table-column>
            <el-table-column prop="title" label="标题" align="center">
            </el-table-column>
            <el-table-column
              prop="replay"
              label="回复状态"
              align="center"
              width="150"
            >
              <template slot-scope="{ row }">
                {{row.result==1?'未回复':'已回复'}}
              </template>

            </el-table-column>
            <el-table-column
              prop="createTime"
              label="提问时间"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="replay"
              label="回复内容"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="{ row }">
                <el-button type="primary" @click="hkClickShowDetail(row)"
                >详情
                </el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-box">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageParams.page"
              :page-sizes="[20, 50, 100]"
              :page-size="pageParams.count"
              :total="total"
              layout=" prev, pager, next,sizes,jumper"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </template>
  </my-card>
</template>

<script>
  import MyCard from "@/components/my-card/index";
  import lineHeader from "@/components/line-header/index";
  import {hkGetFeedbackList} from "@/api/notice";
  import {isNull, hkShowErrorText, hkGetTimeFmt} from "@/utils/tools";
  import {mapGetters} from "vuex"

  export default {
    components: {lineHeader, MyCard},
    props: {},
    data() {
      return {
        total: 0,
        loading: true,
        pageParams: {
          page: 1,
          direction: 0,
          count: 20
        },
        tableList: []
      };
    },
    watch: {},
    computed: {
      ...mapGetters(["userInfo"]),
    },
    methods: {
      // 新建
      hkOpenAdd() {
        this.$router.push("/notice/feedback/add");
      },
      hkClickShowDetail(item) {
        let t = encodeURIComponent(JSON.stringify(item));
        this.$router.push({
          path: "/notice/feedback/info",
          query: {info: t}
        });
      },
      hkGetFeedbackList() {
        this.loading = true;
        hkGetFeedbackList(this.pageParams)
          .then(({data}) => {
            this.tableList = data.data.map(item => {
              item.createTime = hkGetTimeFmt(item.createTime);
              if (item.replayTime == 0) {
                item.replayTime = "";
              } else {
                item.replayTime = hkGetTimeFmt(item.replayTime);
              }
              return item;
            });
            this.total = data.total;
            this.loading = false;
          })
          .catch(err => {
            this.loading = false;
            hkShowErrorText(err.message);
          });
      },
      handleSizeChange(val) {
        this.pageParams.count = val;
        this.hkGetFeedbackList();
      },
      handleCurrentChange(val) {
        this.pageParams.page = val;
        this.hkGetFeedbackList();
      }
    },
    created() {
    },
    mounted() {
      this.hkGetFeedbackList();
    }
  };
</script>
<style lang="scss" scoped>
  .page-table-box {
    margin-top: 30px;
  }

  ::v-deep .header-cell-class-name {
    background: #ecf0f3;
  }

  .pagination-box {
    margin: 15px 0;
    text-align: right;
  }
</style>
